<template>
	<view class="mypet">
		<view class="box1" @click="back">
			<uv-icon name="arrow-left" color="#fff"></uv-icon>
			<view class="box11">我的宠物</view>
		</view>
		<view class="mypet-box">
			<view class="mypet-item" v-for="(item,index) in list" :key="index" @click="goinfor(item.id)">
				<view class="mypet-item-image">
					<image :src="list.image" mode="scaleToFill" />
				</view>
				<view class="mypet-item-text">{{ item.name }}</view>
				<view class="mypet-item-t">
					<uv-input :placeholder="item.type" border="none">
						<template v-slot:suffix>
							<uv-icon name="edit-pen" size="30"></uv-icon>
						</template>
					</uv-input>
				</view>
			</view>
		</view>
		<view class="mypet-but">
			<uv-button text="新增宠物" shape="circle" color="#008c8c" @click="goaddpet"></uv-button>
		</view>
	</view>
</template>

<script setup>
	import {
		myRequest
	} from '@/request/request.js'

	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from "vue";
	// 获取用户宠物查询
	onLoad(() => {
		myRequest('pet/index?server=1', function(err, data) {
			if (err) {

			} else {
			 list.value = data.data
				console.log(list.value);
			}
		}, 'POST', {


		})

	});
	// 接口数据
	const list =ref('')
	const pet = ref([{
			image: 'https://picsum.photos/200?11',
			name: '宠物名称'
		},
		{
			image: 'https://picsum.photos/200?12',
			name: '宠物名称'
		},
		{
			image: 'https://picsum.photos/200?13',
			name: '宠物名称'
		},
		{
			image: 'https://picsum.photos/200?14',
			name: '宠物名称'
		},
	]);
	const goaddpet = () => {
		uni.navigateTo({
			url: '/pages/tianjiacw/tianjiacw'
		})
	}
	const goinfor = (id) => {
		uni.navigateTo({
			url: `/pages/chongwuxx/chongwuxx?id=${JSON.stringify(id)}`
		})
	}
	const back = (() => {
		uni.navigateBack({
			delta: 1, // 返回1个，如果是2，返回2个页面
		});
	})
</script>

<style lang="scss">
	@import url("wodechongw.scss");
</style>